﻿.start-node {
    display: flex;
    flex-direction: column;
    width: 24px;
}

    .start-node .node-content-container {
        position: relative;
    }

        .start-node .node-content-container .node-outline-content {
            background-color: var(--wf-start-activity-color);
            border-radius: 12px;
            height: 24px;
        }

        .start-node .node-content-container .node-content {
            display: flex;
            background-color: var(--wf-node-backcolor);
            height: 24px;
            align-items: center;
            justify-content: center;
        }

            .start-node .node-content-container .node-content .node-icon {
                display: flex;
                align-items: center;
                justify-content: center;
            }

    .start-node .node-line {
        position: relative;
        flex-grow: 1;
        min-height: var(--wf-node-line-length);
    }

        .start-node .node-line .v-line {
            position: absolute;
            top: 0;
            left: calc(50% - 1px);
            width: 2px;
            height: 100%;
            background-color: var(--wf-node-line-color);
        }

        .start-node .node-line ::deep .action {
            position: absolute;
            top: calc(var(--wf-node-line-length) / 2 - 8px);
            left: calc(50% - 8px);
            background-color: var(--wf-backcolor);
        }
